<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/common/taglibs.jspf" %>
<!DOCTYPE html>
<html>
<head>
	<title>新建模型</title>
	<meta name="decorator" content="form"/>
</head>
<body>
<div class="layui-row" style=" height: 460px;overflow: auto;">
	<div class="layui-col-md3 layui-col-xs3">
		<div style="font-size: 20px;margin-bottom: 10px">
			<i class="layui-icon" style="font-size: 20px; color: #009688;">&#xe62e;</i> 流程节点树
		</div>
		<div class="panel-body" style="padding: 10px;">
			<ul id="modelTree" class="ztree" ></ul>
		</div>
	</div>
	<div class="layui-col-md9  layui-col-xs9">
		<div style="font-size: 20px;margin-bottom: 10px">
			<i class="layui-icon panel-title" style="font-size: 20px; color: #009688;">&#xe63c;</i> 节点信息
		</div>
		<div class="layui-row form-content">
			<div class="layui-col-xs12">
				<form:form id="flowSetForm" class="layui-form"  modelAttribute="data"  method="post" action="#">
					<form:hidden path="nodeId"/>
					<form:hidden path="id"/>
					<form:hidden path="modelId"/>
					<form:hidden path="defId"/>
					<form:hidden path="createDate"/>
					<form:hidden path="createUser"/>
					<form:hidden path="orgId"/>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称:</label>
							<div class="layui-input-inline">
								<input id="name" name="name" class="layui-input" type="text"  disabled />
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">类型:</label>
							<div class="layui-input-inline">
								<form:select path="actNodeType" dict="actNodeType"  />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline" isHide="2">
							<label class="layui-form-label"><i class="red"> * </i>行为:</label>
							<div class="layui-input-inline">
								<form:select path="nodeAction" dict="actNodeAction"/>
							</div>
						</div>
						<div class="layui-inline" isHide="25">
							<label class="layui-form-label">回调:</label>
							<div class="layui-input-inline">
								<form:select path="callBack" isJXdata="true" data="${calBacks}" isAddDefaltOption="true" />
							</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-form-item" isHide="2">
							<label class="layui-form-label"><i class="red"> * </i>可修改信息:</label>
							<div class="layui-input-block">
								<form:checkboxes path="changeFiles" lay-skin="primary" items="${writes}"/>
							</div>
						</div>
					</div>
					<div isHide="2" class="layui-form-item">
						<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">用户</li>
								<li>表单字段</li>
							</ul>
							<div class="layui-tab-content" style="height: 100px;">
								<div class="layui-tab-item layui-show">
									<table id="userTab" class="layui-table" isHide="2">
										<thead>
										<tr>
											<th>类型</th>
											<th>名称</th>
											<th>操作</th>
										</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
								<div class="layui-tab-item layui-form-pane">
									<%--<form:checkboxes path="userFields" lay-skin="primary" items="${userFields}"/>--%>
									<div class="layui-form-item" style="margin-top: 10px">
										<label class="layui-form-label">人员字段</label>
										<div class="layui-input-inline">
											<form:select path="userField" >
												<form:options items="${userFields}"></form:options>
											</form:select>
										</div>
									</div>
								</div>
							</div>
						</div>
					<%--<button class="layui-btn layui-btn-small" type="button" onclick="userWindow()"><i class="layui-icon">&#xe612;</i>审批范围</button>--%>
					</div>

					<div class="layui-form-item" isHide="4" id="actRules">
						<div class="layui-inline">
							<label class="layui-form-label">条件1</label>
							<div class="layui-input-inline">
								<form:select path="judgList[0].fieldName" isJXdata="true" isAddDefaltOption="true">
									<option value="">请选择</option>
									<form:options items="${judgs}"></form:options>
								</form:select>
							</div>
							<div class="layui-input-inline" style="padding: 0px;width: 120px">
								<form:select path="judgList[0].rule"  dict="actJudg" isAddDefaltOption="true" />
							</div>
							<div class="layui-input-inline">
								<input name="judgList[0].fieldVal" class="layui-input"  placeholder="" >
							</div>
							<div class="layui-input-inline"  style="padding: 0px;width: 120px">
								<form:select path="judgList[0].elOperator"  dict="actElOperator" isAddDefaltOption="true" />
							</div>
								<%--<button class="layui-btn" onclick="addActRule()">
                                    <i class="layui-icon">&#xe608;</i> 添加
                                </button>--%>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">条件2</label>
							<div class="layui-input-inline">
								<form:select path="judgList[1].fieldName" isJXdata="true" isAddDefaltOption="true">
									<option value="">请选择</option>
									<form:options items="${judgs}"></form:options>
								</form:select>
							</div>
							<div class="layui-input-inline" style="padding: 0px;width: 120px">
								<form:select path="judgList[1].rule"  dict="actJudg" isAddDefaltOption="true" />
							</div>
							<div class="layui-input-inline">
								<input name="judgList[1].fieldVal"  class="layui-input" placeholder="" >
							</div>
							<div class="layui-input-inline" style="padding: 0px;width: 120px">
								<form:select path="judgList[1].elOperator"  dict="actElOperator" isAddDefaltOption="true" />
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">条件3</label>
							<div class="layui-input-inline">
								<form:select path="judgList[2].fieldName" isJXdata="true" isAddDefaltOption="true">
									<option value="">请选择</option>
									<form:options items="${judgs}"></form:options>
								</form:select>
							</div>
							<div class="layui-input-inline" style="padding: 0px;width: 120px">
								<form:select path="judgList[2].rule"  class="layui-input" dict="actJudg" isAddDefaltOption="true" />
							</div>
							<div class="layui-input-inline">
								<input name="judgList[2].fieldVal"  class="layui-input"  >
							</div>
						</div>
					</div>
					<div class="layui-row" style="margin-left: 180px;padding-bottom: 28px;margin-top: 25px;">
						<button class="layui-btn" type="button" id="submitBtn">保 存</button>
						<button class="layui-btn layui-btn-primary" type="button" onclick="closeThisWindow()">关 闭</button>
					</div>
				</form:form>
			</div>
		</div>
	</div>
</div>
<script>
    layui.use('element', function(){
        var element = layui.element;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#thisTime=/, '');
        element.tabChange('thisTime', layid);

        element.on('tab(thisTime)', function(){
            location.hash = 'recycle='+ this.getAttribute('lay-id');
            $("input[name='tabName']").val(this.getAttribute('lay-id'));
            query('recordGrid');
        });
    });
    $(function () {
    	//页面加载都隐藏
    	$("[isHide]").hide();
    	$("#flowSetForm select[name='actNodeType']").on("change",function(){
			$("[isHide]").hide();
			$("[isHide*='"+$(this).val()+"'").show();
		});
    });

    var setting = {
			view: {dblClickExpand: false}
			,data: {key: {name:"treeName"},simpleData: {enable: true,idKey: "treeId",pIdKey: "treePid"}}
			,callback: {onClick: zTreeOnClick}
		};
		$(function(){
			var data='${flows}';
			var ztreeobj=$.fn.zTree.init($("#modelTree"), setting, eval(''+data+''));//ztree树加载
			ztreeobj.expandAll(true);
    });

    /**
    * 节点单击事件
    */
    function zTreeOnClick(event, treeId, treeNode) {
    //清空表单信息
		$("#flowSetForm")[0].reset();
        $("#flowSetForm input[name='id']").val('');
		$("#flowSetForm input[name='name']").val(treeNode.treeName);
		$("#flowSetForm input[name='nodeId']").val(treeNode.treeId);
		$("#flowSetForm input[name='modelId']").val(treeNode.modelId);
		var selectChange=$("#flowSetForm select[name='actNodeType']").val(treeNode.type)[0];
		simulateClick(selectChange);
		var url = "${appPath}/act/model/flowSetInfo";
		var params={
			nodeId:treeNode.treeId,
			type:treeNode.type
    	}
		$.post(url,params,function (result) {
		    if(result.ret == '0'){
				var nodeSet = result.extend.nodeSet;
				if(nodeSet){
					formload("flowSetForm",nodeSet);
                    layui.form.render('select');
				}
				//审批范围
				var userLists = result.extend.userList;
				if(userLists){
					var html="";
					for (var i=0;i<userLists.length;i++){
					    var user = userLists[i];
					    if(user.userType !='5'){
                            html+="<tr id='"+user.id+"'>";
                            html+="  <td>"+user.typeName+"</td>";
                            html+="  <td style='display: none'>";
                            html+="  	<input name='userTypes' value='"+user.userType+"'/>";
                            html+="  	<input name='userIds' value='"+user.userNo+"'/>";
                            html+="  </td>";
                            html+="  <td>"+user.userTitle+"</td>";
                            html+='<td><button type="button" onclick="delUser(this)" class="btn btn-xs btn-white btn-danger"><i class="fa fa-trash-o"></i> 删 除 </button></td>';
                            html+="</tr>";
						}
					}
					$("#userTab tbody").html(html);
				}
				//节点条件
				var fields = result.extend.fields;
				if(fields){
					for(var i=0;i<fields.length;i++){
						simulateClick($("#flowSetForm select[name='judgList["+i+"].fieldName']").val(fields[i].fieldName)[0]);
						$("#flowSetForm select[name='judgList["+i+"].rule']").val(fields[i].rule);
						$("#flowSetForm input[name='judgList["+i+"].fieldVal']").val(fields[i].fieldVal);
						simulateClick($("#flowSetForm select[name='judgList["+i+"].elOperator']").val(fields[i].elOperator)[0]);
					}
                    layui.form.render('select');
                }
			}else {
				alertMsg(result.msg);
			}
		});
    };

    //条件增加 待开发
    function addActRule() {
    	$("#actRules").append();
    }

    /**
    * 选择审批范围
    */
    function userWindow() {
		var url="${appPath}/act/model/userAreaSelect";
		//弹框层
		layer.open({
			scrollbar: false,
			type: 2,
			title : ["审批者选择范围" , true],
			area: ['90%', '90%'], //宽高
			content: [url,'no'],
			shadeClose : false,
		});
    }

    /**
    * 删除审批人
    */
    function delUser(_this) {
    	$(_this).parent().parent().remove();
    }

    /**
    * 保存节点信息
    */
    $("#submitBtn").click(function () {
		var url="${appPath}/act/model/saveNode";
		$.post(url,$("#flowSetForm").serialize(),function (result) {
			if(result.ret == '0'){
				toast(result.msg);
				var nodeSet = result.extend.nodeSet;
				$("#flowSetForm input[name='id']").val(nodeSet.id);
			}else {
				alertMsg(result.msg);
			}
		});
    });

    /**
    * 条件限制　待完善
    */
    $("#flowSetForm select[name$='fieldName']").off().on("change",function () {

    });

</script>
</body>


</html>